<template>
  <div class="tableListBox">
    <div class="common-header">
      <div style="cursor: pointer" @click="back">
        <i class="vxe-icon-arrow-left" style="vertical-align: middle"></i
        ><span style="vertical-align: middle">返回</span>
      </div>
    </div>
    <div class="anthorContent">
      <el-scrollbar style="height: 100%">
        <p class="title"><span class="titleName">基础信息</span></p>
        <vxe-form :data="form" title-align="right" class-name="outForm" @submit="searchEvent">
          <vxe-form-item title="项目编号" field="code" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.projectCode"
                class="normal"
                placeholder="项目编号"
                disabled
                clearable
              ></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="项目全称" field="projectName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.projectName" class="normal" placeholder="项目全称" disabled></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="所属组织" field="belongOrganization" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.belongOrganization" class="normal" placeholder="所属组织" disabled></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="商务人员总数" field="businessPersonnelAmount" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.businessPersonnelAmount"
                class="normal"
                placeholder="商务人员总数"
                disabled
              ></vxe-input>
            </template>
          </vxe-form-item>
        </vxe-form>
        <p class="title"><span class="titleName">商务人员</span></p>
        <div class="title-operation">
          <el-button type="" size="small" @click="back">取消</el-button>
          <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
        <CommonTable
          ref="common"
          isEdit
          :tableData="tableData"
          :postList="postList"
          :columns="tableColumn"
          @pager="pager"
        />
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import CommonTable from './common.vue';
import VXETable from 'vxe-table';
export default {
  components: { CommonTable },
  data() {
    return {
      form: {
        projectCode: '',
        projectName: '',
        belongOrganization: '',
        businessPersonnelAmount: '',
      },
      dataParams: {
        page: 1,
        size: 10,
      },
      tableColumn: [
        {
          field: 'employeeName',
          title: '姓名',
          editRender: {},
          slots: {
            edit: 'employeeName',
          },
        },
        {
          field: 'category',
          title: '所属类别',
          editRender: {},
          slots: {
            edit: 'category',
          },
        },
        {
          field: 'employeeCode',
          title: '员工编码',
          editRender: {},
          slots: {
            edit: 'employeeCode',
          },
        },
        {
          field: 'idCard',
          title: '身份证',
          editRender: {},
          slots: {
            edit: 'idCard',
          },
        },
        {
          field: 'projectPost',
          title: '项目岗位',
          editRender: {},
          slots: {
            edit: 'projectPost',
          },
        },
        {
          field: 'arrivalTime',
          title: '到岗时间',
          editRender: {},
          slots: {
            edit: 'e_arrivalTime',
            default: 'd_arrivalTime',
          },
        },
        {
          field: 'leaveTime',
          title: '离岗时间',
          editRender: {},
          slots: {
            edit: 'leaveTime',
          },
        },
        {
          field: 'isPartTime',
          title: '是否兼职',
          editRender: {},
          slots: {
            default: 'd_isPartTime',
            edit: 'e_isPartTime',
          },
        },
        {
          field: 'isPractice',
          title: '是否实习',
          editRender: {},
          slots: {
            default: 'd_isPractice',
            edit: 'e_isPractice',
          },
        },
      ],
      tableData: {},
      userColumn: [
        {
          type: 'checkbox',
          title: '',
          width: 60,
          editRender: {},
        },
        {
          field: 'name',
          title: '姓名',
          editRender: {},
          width: 280,
          slots: {
            edit: 'name',
          },
        },
        {
          field: 'idCard',
          title: '身份证',
          editRender: {},
          slots: {
            edit: 'idCard',
          },
        },
      ],
      users: [],
      postList: [],
    };
  },
  async created() {
    this.getQuery();
    this.getPostList();
    this.getList();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      if (!query) {
        query = window.location.hash.split('?')[1];
      }
      if (!query) {
        return;
      }
      var vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (pair[0] == variable) {
          return decodeURIComponent(pair[1]);
        }
      }
      return '';
    },
    getQuery() {
      const { projectCode, projectName, belongOrganization, businessPersonnelAmount } = this.$route.query;
      this.form.projectCode = projectCode;
      this.form.projectName = projectName;
      this.form.belongOrganization = belongOrganization;
      this.form.businessPersonnelAmount = businessPersonnelAmount;
    },
    pager({ currentPage, pageSize }) {
      this.dataParams.page = currentPage;
      this.dataParams.size = pageSize;
      this.getList();
    },
    async getPostList() {
      await this.$api.getPostList({ postType: 3, page: 1, size: 1000 }).then((res) => {
        const { list } = res.data;
        this.postList = list;
      });
    },
    async getList() {
      await this.$api
        .fetchEmployeeList({
          projectCode: this.form.projectCode,
          ...this.dataParams,
        })
        .then((res) => {
          try {
            const { projectEmployeeInventory } = res.data;
            this.total = projectEmployeeInventory.total;
            projectEmployeeInventory?.list?.forEach((item) => {
              item.belongOrganization = this.form.belongOrganization;
              item.projectName = this.form.projectName;
            });
            this.tableData = projectEmployeeInventory;
          } catch {}
        });
    },
    exp() {
      this.$refs.common.exp();
    },
    getUpdateEvent() {
      const $table = this.$refs.common.$refs.table;
      const updateRecords = $table.getUpdateRecords();
      return updateRecords;
    },
    save() {
      const updateRecords = this.getUpdateEvent();
      if (updateRecords.length === 0) {
        VXETable.modal.message({
          content: '无修改项',
          status: 'error',
        });
        return;
      }
      this.$api.addExternalEmployee(updateRecords).then((res) => {
        if (res.code === 0) {
          VXETable.modal.message({
            content: '保存成功',
            status: 'success',
          });
          this.back();
        }
      });
      console.log(updateRecords);
    },
    edit() {},
    searchEvent() {},
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .vxe-form.outForm {
    .vxe-form--item-content {
      width: 280px;
    }
    .vxe-row .vxe-form--item {
      width: 25%;
    }
  }
}
</style>
